<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 梦梦的祝福CWC </title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-image: url('https://gitee.com/weiniliu/github-web-resource/raw/master/WebbackgroundB.jpg');
            background-size: cover;
            background-position: center;
            font-family: 'Comic Sans MS', cursive, sans-serif;
            text-align: center;
            color: white;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        .banner {
            width: 100%;
            height: 150px;
            background-image: url('https://gitee.com/weiniliu/github-web-resource/raw/master/HTitle.jpg');
            background-size: cover;
            background-position: center;
            position: relative;
            opacity: 0.8; /* 横幅透明度调整为80% */
        }
        .snake {
            position: absolute;
            left: 20px;
            bottom: 0;
            width: 100px;
            height: auto;
        }
        .content {
            display: flex;
            flex-direction: column;
            justify-content: center; /* 垂直居中 */
            align-items: center; /* 水平居中 */
            flex: 1;
            padding: 20px;
        }
        h1, p {
            text-shadow: 2px 2px 4px #000000;
            opacity: 0; /* 初始透明度为0 */
            animation: fadeIn 1s ease-in-out 1s forwards; /* 1秒后开始，1秒内逐渐显示 */
            margin: 10px 0; /* 调整间距 */
        }
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        /* 播放按钮样式 */
        .play-button {
            margin: 20px auto; /* 居中并留出边距 */
            padding: 8px 16px; /* 调小按钮 */
            font-size: 14px; /* 调小字体 */
            color: white;
            background-color: #ff6f61;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        .play-button:hover {
            background-color: #ff4a3d;
        }
        /* 版权和开源协议样式 */
        footer {
            margin-top: auto; /* 确保 footer 在页面最下方 */
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
            font-size: 12px;
            color: #ccc;
        }
        footer a {
            color: #ff6f61;
            text-decoration: none;
        }
        footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <!-- 背景音乐 -->
    <audio id="bgm" loop>
        <source src="https://gitee.com/weiniliu/github-web-resource/raw/master/BGM.mp3" type="audio/mpeg">
        您的浏览器不支持音频播放。
    </audio>

    <div class="banner">
        <img src="https://github.com/SuDreamWei/WebResource/blob/main/smallsnakeA.png" alt="小蛇" class="snake">
    </div>
    <div class="content">
        <h1> 蛇年快乐！ </h1>
        <p> 梦梦愿你在新的一年里，心想事成，万事如意 </p>
    </div>

    <!-- 播放按钮 -->
    <button class="play-button" onclick="playMusic()">点击播放音乐 🎵</button>

    <!-- 版权和开源协议 -->
    <footer>
        <p>Copyright © 2025 SuDreamWei. All rights reserved.</p>
        <p>Licensed under the <a href="https://opensource.org/licenses/MIT" target="_blank">MIT License</a>.</p>
    </footer>

    <script>
        // 播放音乐的函数
        function playMusic() {
            const bgm = document.getElementById('bgm');
            bgm.play();
            document.querySelector('.play-button').style.display = 'none'; // 播放后隐藏按钮
        }
    </script>
</body>
</html>